<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用openlayers加载GeoJson数据</title>
    <link rel="stylesheet" href="css/ol.css" />
    <script src="js/ol.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="ToolLib">
        <input type="button" class="ButtonLib" id="addGEOJSON" value="加载GEOJSON" onclick="loadVectData()" />
    </div>
    <div id="mapCon"></div>
<script type="text/javascript">
    //矢量数据图层
    var vectorLayer;

    //地图投影坐标系
    var projection = ol.proj.get('EPSG:3857');

    /**
     *矢量几何要素的样式
     */
    var image = new ol.style.Circle({
        radius: 5,
        fill: null,
        stroke: new ol.style.Stroke({ color: 'red', width: 1 })
    });
    var styles = {
        'Point': [
            new ol.style.Style({
                //点样式
                image: image
            })
        ],
        'LineString': [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    //线的边界样式
                    color: 'green',
                    width: 1
                })
            })
        ],
        'MultiLineString': [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    //多线的边界样式
                    color: 'green',
                    width: 1
                })
            })
        ],
        'MultiPoint': [
            new ol.style.Style({
                //多点的点样式
                image: image
            })
        ],
        'MultiPolygon': [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    //多区的边界样式
                    color: 'yellow',
                    width: 1
                }),
                fill: new ol.style.Fill({
                    //多区的填充样式
                    color: 'rgba(255, 255, 0, 0.1)'
                })
            })
        ],
        'Polygon': [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    //区的边界样式
                    color: 'blue',
                    lineDash: [4],
                    width: 3
                }),
                fill: new ol.style.Fill({
                    //区的填充样式
                    color: 'rgba(0, 0, 255, 0.1)'
                })
            })
        ],
        'GeometryCollection': [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    //集合要素的边界样式
                    color: 'magenta',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    //集合要素的填充样式
                    color: 'magenta'
                }),
                image: new ol.style.Circle({
                    //集合要素的点样式
                    radius: 10,
                    fill: null,
                    stroke: new ol.style.Stroke({
                        color: 'magenta'
                    })
                })
            })
        ],
        'Circle': [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    //圆的边界样式
                    color: 'red',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    //圆的填充样式
                    color: 'rgba(255,0,0,0.2)'
                })
            })
        ]
    };

    var styleFunction = function (feature, resolution) {
        //根据要素类型设置几何要素的样式
        return styles[feature.getGeometry().getType()];
    };


    //实例化Map对象加载地图
    var map = new ol.Map({
        //地图容器div的ID
        target: 'mapCon',
        //地图容器中加载的图层
        layers: [
            //加载瓦片图层数据
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                    attributions: "天地图的属性描述",
                    wrapX: false
                }),
                preload: Infinity
            }),
            new ol.layer.Tile({
                title: "天地图矢量图层注记",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                    attributions: "天地图的属性描述",
                    wrapX: false
                }),
                preload: Infinity
            })
        ],
        //地图视图设置
        view: new ol.View({
            //设置地图投影坐标系
            projection: projection,
            //地图初始中心点
            center: [0, 0],
            //地图初始显示级别
            zoom: 2
        }),
        controls:[new ol.control.MousePosition()]
    });

    /**
     * 将矢量几何要素显示到地图中
     * @param {String} type 数据类型
     * @param {String} data 数据的url地址
     */
    function loadVectData() {
        if (vectorLayer != null || vectorLayer == "undefined") {
            //移除已有矢量图层
            map.removeLayer(vectorLayer);
        }
        //实例化矢量数据源，用GeoJSON格式的类解析
        var vectorSource = new ol.source.Vector({
            url: "/hubei.geojson",
            format: new ol.format.GeoJSON()
        });
        vectorLayer = new ol.layer.Vector({
            //矢量数据源
            source: vectorSource,
            //样式设置
            style: styleFunction
        });
        //将矢量图层加载到地图中
        map.addLayer(vectorLayer);
        //获取地图视图
        var view = map.getView();
        //平移地图
        view.setCenter([12536865.056410152, 3635008.742201894]);
        //地图缩放
        view.setZoom(6);
    }

</script>

</body>
</html>